<template>
    <div class="home">
        <header class="logout">
            <button @click="logout()">退出登录</button>
        </header>
        <main class="user_msg">
            <input type="text" id="name" v-model="name" />
            <input type="text" id="phone" v-model="phone" />
            <input type="text" id="address" v-model="address" />
            <button @click="change_msg()">修改信息</button>
        </main>
    </div>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component';
import { UserApi } from '@/api/user';
import { useStore } from 'vuex';

export default class UerHome extends Vue {
    user_store = useStore();
    id_user = this.user_store.state.user.id || 0;
    name = this.user_store.state.user.name || '';
    phone = this.user_store.state.user.phone || '';
    address = this.user_store.state.user.address || '';
    mounted() {
        this.get();
    }
    checkPhone(phone) {
        if (!/^1[3|4|5|7|8]\d{9}$/.test(phone)) {
            return false;
        }
    }
    // 退出登录
    logout() {
        localStorage.removeItem('data');
        sessionStorage.removeItem('token');
        this.user_store.dispatch('setUser', {
            iduser: 0,
            user_name: '',
            address: '',
            phone: '',
        });
        this.$router.push('/login');
    }

    // 获取个人信息
    get() {
        if (this.name == '' || this.phone == '' || this.address == '') {
            const data = localStorage.getItem('data') || '';
            const userInfo = JSON.parse(data);
            // console.log(userInfo);
            this.id_user = userInfo.iduser;
            this.name = userInfo.user_name;
            this.phone = userInfo.phone;
            this.address = userInfo.address;
            this.user_store.dispatch('setUser', userInfo);
        }
    }
    // 修改个人信息
    async change_msg() {
        if (this.name == '' || this.phone == '' || this.address == '') {
            alert('请输入相关的个人信息');
            return;
        }
        if (this.checkPhone(this.phone)) {
            alert('手机号码有误，请重填');
            return;
        }
        const params = {
            iduser: this.id_user,
            token: sessionStorage.getItem('token'),
            user_name: this.name,
            phone: this.phone,
            address: this.address,
        };
        const res = await UserApi.modify(params);
        if (res.code == 0) {
            // console.log(res);
            params.token = null;
            this.user_store.dispatch('setUser', params);
            const json_msg = JSON.stringify(params);
            localStorage.setItem('data', json_msg);
            alert('修改个人信息成功');
        } else {
            alert('修改个人信息失败');
        }
    }
}
</script>

<style lang="less" scoped>
.logout {
    height: 50px;
    position: relative;
}
.logout button {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    height: 30px;
    right: 20px;
}
.user_msg {
    width: 100vw;
    height: 100vh;
    padding: 100px 0;
}
.user_msg input {
    width: 60%;
    height: 30px;
    display: block;
    margin: 50px auto;
    border: 1px solid black;
    border-radius: 5px;
}
.user_msg button {
    width: 200px;
    height: 30px;
    display: block;
    margin: 50px auto;
}
#name {
    background-image: url(../../public/img/static/name.png);
    background-repeat: no-repeat;
    background-position: 0;
    text-indent: 35px;
}
#phone {
    background-image: url(../../public/img/static/phone.png);
    background-repeat: no-repeat;
    background-position: 0;
    text-indent: 35px;
}
#address {
    background-image: url(../../public/img/static/address.png);
    background-repeat: no-repeat;
    background-position: 0;
    text-indent: 35px;
}
</style>
